import { ThemeProvider } from 'next-themes';
import { SessionProvider } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import Head from 'next/head';
import '../styles/globals.css';

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  const router = useRouter();
  const [isPageTransitioning, setIsPageTransitioning] = useState(false);

  useEffect(() => {
    const handleStart = () => {
      setIsPageTransitioning(true);
    };
    
    const handleComplete = () => {
      setTimeout(() => {
        setIsPageTransitioning(false);
      }, 100);
    };

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  }, [router]);

  return (
    <SessionProvider session={session}>
      <ThemeProvider attribute="class" enableSystem defaultTheme="system">
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
          <meta name="application-name" content="小铭Ai梦想家" />
          <meta name="description" content="智能量化交易平台，提供专业的多级引用样式和数据可视化功能" />
          <meta name="keywords" content="量化交易,AI投资,Markdown编辑器,金融分析" />
          <meta name="author" content="小铭Ai梦想家技术团队" />
          <link rel="icon" href="/favicon.ico" />
          <title>小铭Ai梦想家 - 智能量化交易平台</title>
        </Head>
        <div suppressHydrationWarning className={isPageTransitioning ? 'page-transitioning' : ''}>
          <Component {...pageProps} />
        </div>
      </ThemeProvider>
    </SessionProvider>
  );
}

export default MyApp; 